<template>
  <div class="echarts_cap">
    <div :id="'echart' + texter.id" style="height: 100%" :key="texter.id"></div>
  </div>
</template>
<script>
import { pillar } from '@/utils/app-ecahrts'
export default {
  props: {
    texter: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    'texter.data': {
      handler(val) {
        this.init()
      },
    },
  },
  data() {
    return {}
  },
  // created() {
  //   this.init();
  // },
  methods() {
    this.init()
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(document.getElementById('echart' + this.texter.id))
      //统计折线
      pillar.series[0].data = this.texter.data
      pillar.title.text = this.texter.name
      pillar.title.subtext = this.texter.kaer ? this.texter.cont + '%' : this.texter.cont.toString()
      // pillar.tooltip.formatter = this.texter.formatter
      //   ? this.texter.formatter
      //   : "{c}";
      pillar.title.top = this.texter.top
      pillar.series[0].color = this.texter.color
      pillar.series[0].name = this.texter.name2
      pillar.series[1].name = this.texter.name2
      pillar.series[1].data = [this.texter.cont]
      myChart.clear()
      myChart.setOption(pillar, true)
      window.onresize = () => {
        myChart.resize()
      }
      myChart.on('click', (a, b) => {
        let obj = {
          namefa: a.seriesName,
          namech: a.name,
        }
        this.$emit('echar', obj)
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.echarts_cap {
  width: 100%;
  height: 100%;
}
</style>